<template>
  <div>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table
        :data="employeeList.rows"
        stripe
        @selection-change="selectedChange"
        style="width: 100%">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          width="210">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="210">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话"
          width="210">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="180">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别"
          width="180">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="120" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 1" type="success">正常</el-tag>
          <el-tag v-if="scope.row.state === 2" type="danger">锁定</el-tag>
          <el-tag v-if="scope.row.state === 3" type="info">注销</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="headImage"
          label="头像">
      </el-table-column>
      <el-table-column label="操作" width="210">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.selected.length===0">批量删除</el-button>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="employeeList.total"
          style="float:right;">
      </el-pagination>
    </el-col>
    <el-dialog title="新增/保存"
               :visible.sync="formVisible"
               :close-on-click-modal="false">
      <el-form :model="employeeForm" label-width="80px"ref="editForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="employeeForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="employeeForm.password" show-password auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="employeeForm.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="headImage">
          <el-input v-model="employeeForm.headImage" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="employeeForm.age" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-cascader v-model="employeeForm.department.id"
                       :options="departmentList"
                       :props="{
							            checkStrictly: true,
							            label:'name',
							            value:'id'
							         }"
                       clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getEmployee()
  },
  data() {
    return {
      departmentList:[],
      employeeForm:{
        id:null,
        username:"",
        password:"",
        email:"",
        headImage:"",
        age:null,
        department:{
          id:null,
          name:""
        }
      },
      selected:[],
      formVisible:false,
      employeeList: [],
      query: {
        currentPage: 1,
        pageSize: 10,
        keyword: ""
      }
    }
  },
  methods: {
    search(){
      this.query.currentPage = 1
      this.getEmployee()
    },
    handleAdd(){
      this.employeeForm = {
        id:null,
        username:"",
        password:"",
        email:"",
        headImage:"",
        age:null,
        department:{
          id:null,
          name:""
        }
      }
      this.formVisible = true;
      this.getDepartment()
    },
    saveSubmit(){
      let arr = this.employeeForm.department.id
      this.employeeForm.department.id = arr[arr.length - 1]
      this.$confirm('确认提交吗？', '提示', {})
          .then(() => {
        // 调用后端接口-axios
        this.$http.put("/employee", this.employeeForm)
            .then(result => {
              // 获取后端返回的结果
              result = result.data; // {success:true,message:""}
              if (result.success) {
                this.$message({ message: "保存成功!", type: 'success' });
                // 关闭弹框
                this.formVisible = false;
                this.employeeForm = {
                  id:null,
                  username:"",
                  password:"",
                  email:"",
                  headImage:"",
                  age:null,
                  department:{
                    id:null,
                    name:""
                  }
                }
                this.query.currentPage = 1;
                this.getEmployee();
              } else {
                this.$message({ message: result.message, type: 'error' });
              }
            })
            .catch(result => {
              this.$message({ message: "网络异常,请检查网络!", type: 'error' });
            })
      }).catch(() => {
        this.$message({message: '取消提交!', type: 'info'});
      })
    },
    handleEdit(index,row){
      this.getDepartment()
      this.formVisible = true
      this.employeeForm = row
      if (!this.employeeForm.department){
        this.employeeForm.department = {
          id:null,
          name:""
        }
      }
    },
    handleDel(index,row){
      this.$confirm('确认删除吗？', '提示', {type: 'warning'})
          .then(() => {
            let id = row.id
            this.$http.delete("/employee/" + id)
                .then(result =>{
                  result = result.data
                  if (result.success){
                    this.$message({ message: "删除成功!", type: 'success' });
                    this.query.currentPage = 1
                    this.getEmployee()
                  } else {
                    this.$message({ message: result.message, type: 'error' });
                  }
                })
                .catch(result => {
                  this.$message({message: '删除失败!', type: 'error'});
                })
          })
          .catch(() => {
        this.$message({message: '已取消删除!', type: 'info'});
      });
    },
    selectedChange(selected){
      this.selected = selected;
    },
    batchRemove(){
      let ids = this.selected.map(item =>item.id)
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 2 调后端的删除接口
        this.$http.patch("/employee", ids)
            .then(result => {
              result = result.data; // {success:true,message:""}
              if (result.success) {
                // 提示"删除成功"
                this.$message({ message: "删除成功!", type: 'success' });
                // 删除成功以后,要重新查询数据,并且要从第一页开始进行查询
                this.query.currentPage = 1;
                // 调用查询方法
                this.getEmployee();
                // this.search();
              } else {
                this.$message({ message: result.message, type: 'error' });
              }
            })
            .catch(result => {
              this.$message({ message: "网络异常,请检查网络!", type: 'error' });
            })
      }).catch(() => {
        this.$message({ message: '已取消删除!', type: 'info' });
      });
    },
    handleSizeChange(val){
      this.query.pageSize = val;
      this.query.currentPage = 1;
      this.getEmployee()
    },
    handleCurrentChange(val){
      this.query.currentPage = val
      this.getEmployee()
    },
    getEmployee() {
      this.$http.post("/employee", this.query)
          .then(result => {
            result = result.data
            if (result.success) {
              this.employeeList = result.dataObj
            } else {
              this.$message({
                message: result.data.message,
                type: 'error'
              });
            }
          })
          .catch(result => {
            this.$message({
              message: '网络异常!',
              type: 'error'
            });
          })
    },
    getDepartment() {
      this.$http.get("/department/tripTree")
          .then(result => {
            result = result.data
            if (result.success) {
              this.departmentList = result.data
            } else {
              this.$message({
                message: result.data.message,
                type: 'error'
              });
            }
          })
          .catch(result => {
            this.$message({
              message: '网络异常',
              type: 'error'
            });
          });
    }
  }
};
</script>

<style scoped>

</style>